<template>
  <div id="appp">
    <!-- 远程端视频流 -->
    <div style="display: flex; justify-content: center; align-items: center; height: 100%">
      <div style="width: 1152px; height: 648px; background-color: #f0f0f0; border: 1px solid #ccc">
        <video
          id="remoteVideo"
          ref="remoteVideoRef"
          style="width: 100%; height: 100%"
          autoplay
          playsinline
          @click="toggleFullscreen"
        >
          远程视频
        </video>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { doOfferPull } from '@/utils/rtc_pull'
import { onMounted, ref } from 'vue'

export default defineComponent({
  name: 'Visit',
  data() {
    return {
      userId: Math.random().toString(36).substring(2),
    }
  },
  mounted() {
    this.getVisiteRoom()
  },
  methods: {
    toggleFullscreen() {
      if (!document.fullscreenElement) {
        this.$refs.remoteVideoRef.requestFullscreen()
      } else {
        document.exitFullscreen()
      }
    },

    getVisiteRoom() {
      var search = new URLSearchParams(location.search)
      var roomId = search.get('roomid')
      var userId = Math.random().toString(36).substring(2)
      if (roomId) {
        doOfferPull(userId, roomId)
      }
    },
  },
})
</script>
